import React, { Component } from 'react';

// 1. 创建一个上下文对象
const TitleContext = React.createContext()

// 可以给上下文定义一个 displayName 属性
// 该属性是用来给 context 起名用的
// 起的名字可以在控制台中安装react插件进行查看
TitleContext.displayName = 'title'

const BoxContext = React.createContext()
BoxContext.displayName = 'box'

class First extends Component {

  // 3.2 通过静态属性来进行接收
  static contextType = TitleContext

  render(){
    // console.log(this.context);
    return (<>
      <div>
        First： {this.props.title}
        <br />
        {/* 4. 使用接收过来的 context */}
        First： {this.context.name} -- {this.context.title}

        {/* {this.context.sex.map(item => {
          return (<></>)
        })} */}
        {this.context.sex.map(item => (<span key={item}>{item}</span>))}

        <Section name={this.props.title} />
      </div>
    </>)
  }
}
// 3.1 通过组件名 .contextType 进行值的接收
// First.contextType = TitleContext

const Section = (props)=>{

  return (<>
    <div>
      Section：{props.name}
      <br />
      {/* 3. 通过 TitleContext.Consumer 组件进行数据的接收 */}
      <TitleContext.Consumer>
        {(value)=>{
          // 4. 使用数据
          return (<>Section：{value.name} - {value.title}</>)
        }}
      </TitleContext.Consumer>

    </div>
  </>)
}
// 函数式组件无法通过 .contextType 进行获取
// Section.contextType = TitleContext

class App extends Component {
  render() {
    return (
      <div>
        {/* 2. 使用上下文对象中的 Provider 组件，配合 value 属性进行值的传递 */}
        <TitleContext.Provider value={{title: '飞旺', name: '涛涛', age: 88, sex: ['男', '未知']}}>
          <BoxContext.Provider value={['你好','世界 ']}>
            <First title='卫龙' />
          </BoxContext.Provider>
        </TitleContext.Provider>

      </div>
    );
  }
}

export default App;
